<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>11_ajax</title>
</head>
<body>
<div id="example"></div>

<script src="../../lib/js/react.development.js"></script>
<script src="../../lib/js/react-dom.development.js"></script>
<script src="../../lib/js/babel.min.js"></script>
<script type="text/javascript" src="../../lib/js/prop-types.js"></script>
<script type="text/javascript" src="../../lib/js/axios.js"></script>
<script type="text/babel">
  /*
  需求:
    1. 界面效果如下
    2. 根据指定的关键字在github上搜索匹配的最受关注的库
    3. 显示库名, 点击链接查看库
    4. 测试接口: https://api.github.com/search/repositories?q=r&sort=stars
  */

  class MostStarRepo extends React.Component {

    state = {
      repoName: '',
      repoUrl: ''
    }

    componentDidMount () {
      // 使用axios发送异步的ajax请求
      const url = `https://api.github.com/search2/repositories?q=re&sort=stars`
      axios.get(url)
          .then(response => {
            const result = response.data
            // console.log(response)
            // 得到数据
            const {name, html_url} = result.items[0]
            // 更新状态
            this.setState({repoName:name, repoUrl: html_url})
          })
          .catch((error) => {
            alert(error.message)
          })
      // 使用fetch发送异步的ajax请求
      /*fetch(url)
        .then(response => {
          return response.json()
        })
        .then(data => {
          // 得到数据
          const {name, html_url} = data.items[0]
          // 更新状态
          this.setState({repoName:name, repoUrl: html_url})
        })*/
    }

    render () {
      const {repoName, repoUrl} = this.state
      if(!repoName) {
        return  <h2>LOADING...</h2>
      } else {
        return <h2>Most star repo is <a href={repoUrl}>{repoName}</a></h2>
      }
    }
  }

  ReactDOM.render(<MostStarRepo />, document.getElementById('example'))



</script>
</body>
</html>



